<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataZymb } from "@/api/search";
import { addOrUpdateZymb } from "@/api/addOrUpdate";

const city = window.globalObj.name;
const editorRef = shallowRef();

const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");

// 加载html
const initHtml = () => {
  searchDataZymb({ m: "行动要点-抢救抢修行动的方法措施" }).then((res) => {
    const { data } = res;
    valueHtml.value =
      data.find((x) => x.k === "抢救抢修行动的方法措施")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "重要目标遭敌破坏后，目标所在单位应按防护方案迅速组织专业队伍进行抢救抢险抢修，在市人防指挥部的统一指挥下，协调各种力量及时消除空袭后果。1.迅速组织消防专业队伍，利用各种消防设施和就便器材，尽快扑灭火灾或控制其蔓延。2.组织重要目标抢险抢修专业队伍，清除倒塌建筑物，排除爆炸物，紧急抢修供电、供水、供气设施，保障目标单位正常生产生活基本运转。3．重要的道路、桥梁、港口、机场等目标遭破坏，组织抢险抢修专业队伍，紧急修通主要干线，修复主要设施，排除未爆弹药，确保最低限度的使用要求。4．发生大量人员伤亡时，应组织医疗救护专业队伍及时抢救和运送伤员。5．通信枢纽和警报通信网络遭到破坏，立即组织抢险抢修专业队伍和通信专业队伍迅速抢修被破坏的设施和线路，确保通信的不间断和警报的及时发放。6．遭敌核、生、化武器袭击时，组织防化防疫专业队伍迅速查明灾害源的性质、位置以及扩散面积、危害程度等，划定人员活动禁区，设立洗消站，对受染人群进行洗消，并做好灾情监控。7．及时组织治安专业队伍，加强巡逻和纠察，管制交通，实行治安联防，维持社会秩序。8．组织运输专业队伍积极配合其他专业力量的行动，保障人员、物资的运输。"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateZymb({
      m: "行动要点-抢救抢修行动的方法措施",
      data: [
        {
          k: "抢救抢修行动的方法措施",
          v: valueHtml.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (!editor) return;
  editor.destroy();
});
</script>
<template>
  <div class="">
    <FirstTitle name="抢救抢修行动的方法措施" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>